const Fragment = React.Fragment

class MyComp extends React.Component {
    // 属性的es7新写法
    state = {
        isLike: true
    }

    // 改变状态时触发
    componentDidUpdate () {
        console.log('state change')
    }

    // 改变状态函数
    changeHandler () {
        this.setState({
            isLike: !this.state.isLike
        })
    }

    // 渲染函数 每次状态改变都会重新渲染
    render () {
        console.log('render')
        let { isLike } = this.state
        let msg = ''
        if (isLike) {
            msg = <div>😊喜欢</div>
        } else {
            msg = <div>😒讨厌</div>
        }
        return (
        <Fragment>
            <button onClick={this.changeHandler.bind(this)}>切换</button>
            {msg}
        </Fragment>
        )
    }
}

ReactDOM.render(<MyComp></MyComp>, document.getElementById('root'))
